<template>
    <div class="game-box flex-align-center-col">
        <div class="game-tab-box">
            <MyTabs :tab-list="obj.tabList" ></MyTabs>
        </div>
    </div>
</template>

<script>
    import {reactive, ref} from "@vue/reactivity";
    import {useRoute} from "vue-router";
    import TabBox from "@/components/article/TabBox";
    import axios from "axios";
    import MyTabs from "@/components/article/MyTabs";
    import {onMounted} from "@vue/runtime-core";
    import {goTop} from "@/assets/js/utils";

    export default {
        name: "Game",
        components: {MyTabs},
        setup(){

            let classifyId=ref()
            let obj=reactive({
                tabList:[]
            })


            function getTabList(){
                return axios.get("/api/classify/tabs?id="+classifyId.value).then(resp=>resp.data)
            }

            onMounted(async ()=>{
                const data=await getTabList()
                if(data.code===200){
                    obj.tabList=data.data
                }
                goTop()
            })

            return{
                classifyId,
                obj
            }
        },
        beforeCreate() {
            const route=useRoute()
            if( route.query.classifyId!=null){
                this.classifyId=Number( route.query.classifyId)
            }
        }
    }
</script>

<style scoped lang="less">
    .game-box{
        width: 100%;
        min-height: 2100px;
        background-color: var(--theme-color);
        padding-top: 100px;
        .game-tab-box{
            width: 1200px;
            height: 100%;
        }
    }
</style>